<template>
<el-card  header=提交热度>
  <div>
    <calendar-heatmap :locale="localeData" :range-color="rangeColor" :round="6" tooltip-unit="提交工作"  :max="10" end-date="2022-7-1" :values="timeValue"  />
  </div>
  </el-card>
</template>

<script>
  import { CalendarHeatmap } from 'vue3-calendar-heatmap'
    
   export default {
  data() {
    return {
      timeValue: [
         { date: "2022-12-02", count: 10 },
        { date: "2022-08-02", count: 10 },
        { date: "2022-08-03", count: 3 },
        { date: "2022-08-04", count: 6 },
        { date: "2022-08-05", count: 4 },
        { date: "2022-08-06", count: 2 },
        { date: "2022-08-07", count: 1 },
        { date: "2022-08-08", count: 4 },
        { date: "2022-08-15", count: 7 },
        { date: "2022-08-22", count: 2 },
        { date: "2022-08-29", count: 3 },
        { date: "2022-09-05", count: 3 },
        { date: "2022-09-28", count: 5 },
        { date: "2022-09-22", count: 1 },
        { date: "2022-09-23", count: 3 },
        { date: "2022-09-24", count: 2 },
        { date: "2022-10-04", count: 4 },
        { date: "2022-10-02", count: 6 },
        { date: "2022-10-10", count: 3 },
        { date: "2022-10-11", count: 2 },
        { date: "2022-10-17", count: 6 },
        { date: "2022-10-19", count: 3},
        { date: "2022-10-23", count: 6 },
        { date: "2022-10-27", count: 6 },
        { date: "2022-10-28", count: 6 },
        { date: "2022-10-29", count: 6 },
        { date: "2022-11-22", count: 6 },
        { date: "2022-11-30", count: 6 },
        { date: "2022-12-08", count: 6 },
        { date: "2022-12-16", count: 6 },
        { date: "2022-12-24", count: 6 },
        { date: "2022-01-01", count: 6 },
        { date: "2022-01-09", count: 6 },
        { date: "2022-01-16", count: 6 },
        { date: "2022-01-22", count: 6 },
        { date: "2022-01-28", count: 6 },
        { date: "2022-02-03", count: 6 },
         { date: "2022-02-09", count: 6 },
        { date: "2022-02-15", count: 6 },
        { date: "2022-02-21", count: 6 },
        { date: "2022-03-21", count: 6 },
        { date: "2022-03-22", count: 6 },
        { date: "2022-03-23", count: 6 },
        { date: "2022-03-24", count: 6 },
        { date: "2022-03-25", count: 6 },
        { date: "2022-03-26", count: 6 },
        { date: "2022-03-27", count: 6 },
        { date: "2022-03-28", count: 6 },
        { date: "2022-03-31", count: 6 },
        { date: "2022-04-03", count: 6 },
        { date: "2022-04-07", count: 6 },
        { date: "2022-04-04", count: 6 },
        { date: "2022-04-10", count: 6 },
        { date: "2022-04-11", count: 6 },
        { date: "2022-04-14", count: 6 },
        { date: "2022-04-17", count: 6 },
        { date: "2022-04-18", count: 6 },
        { date: "2022-04-21", count: 6 },
        { date: "2022-04-24", count: 6 },
        { date: "2022-04-25", count: 6 },
        { date: "2022-04-28", count: 6 },
        { date: "2022-05-01", count: 6 },
        { date: "2022-05-02", count: 6 },
        { date: "2022-05-05", count: 6 },
        { date: "2022-05-08", count: 6 },
        { date: "2022-05-09", count: 6 },
        { date: "2022-05-12", count: 6 },
        { date: "2022-05-15", count: 6 },
      ],
      rangeColor:['#3f3f3f', '#33333', '#73b3f3', '#3886e1', '#17459e'],
      localeData:
      {
          months: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
          days: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
          No: 'No',
          on: 'on',
          Less: 'Laaaaaess',
          More: 'More'
      }

    };
  },
  components: {
    CalendarHeatmap,
  },
};
</script>